{% extends "base/base.html" %}
{% load static %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'cases/css/case_create.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
{% endblock %}

{% block content %}
    <div class="edit-container">
        <!-- 全局配置 -->
        <div class="config-card global-config-card">
            <div class="d-flex justify-content-between align-items-start mb-4">
                <h3 class="config-title">全局配置</h3>
                <div class="action-buttons-top">
                    <button class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-save"></i> 保存
                    </button>
                    <button class="btn btn-sm btn-success">
                        <i class="bi bi-play-btn"></i> 执行
                    </button>
                </div>
            </div>

            <div class="form-grid">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label" for="case-name">用例名称</label>
                        <input id="case-name" type="text" class="form-control" value="HTTP用户登录接口">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="case-host">域名</label>
                        <input id="case-host" type="text" class="form-control" value="api.coolyuntest.com">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="case-port">端口</label>
                        <input id="case-port" type="number" class="form-control" value="443">
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="global-variables">全局变量 (JSON)</label>
                        <textarea id="global-variables" class="form-control"
                                  rows="3">{"token": "{{ auth_token }}"}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤编辑主容器 -->
        <div class="d-flex flex-column flex-md-row mt-4">
            <!-- 左侧步骤列表 -->
            <div class="step-list-card me-md-3">
                <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                    <h5 class="mb-0">测试步骤</h5>
                    <button class="btn btn-sm btn-primary" id="addStepBtn">
                        <i class="bi bi-plus-lg"></i> 添加
                    </button>
                </div>
                <div class="step-items-container">
                    <div class="step-items" id="stepList"></div>
                </div>
            </div>

            <!-- 右侧步骤编辑器 -->
            <div class="step-editor-card config-card flex-grow-1">
                <!-- 协议配置区 -->
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label">步骤名称</label>
                        <input type="text" class="form-control step-name-input" placeholder="输入步骤名称">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">协议类型</label>
                        <select class="form-select protocol-select">
                            <option value="HTTP">HTTP</option>
                            <option value="RPC">RPC</option>
                            <option value="DUBBO">DUBBO</option>
                            <option value="SQL">SQL</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">接口URL</label>
                        <input type="url" class="form-control api-url-input" placeholder="/api/v1/login">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Content-Type</label>
                        <select class="form-select contentType-select">
                            <option>application/json</option>
                            <option>text/xml</option>
                            <option>application/x-www-form-urlencoded</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <div class="form-check mt-4">
                            <input class="form-check-input" type="checkbox" id="verifyCert">
                            <label class="form-check-label" for="verifyCert">SSL验证</label>
                            <div class="cert-path-group mt-2">
                                <input type="text" class="form-control cert-path-input" placeholder="/path/to/cert.pem">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 参数配置Tabs -->
                <div class="config-tabs">
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#variables">接口参数</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#extract">参数提取</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#export">导出参数</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#validators">断言配置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#script">脚本编辑</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="variables">
                        <textarea id="variables" class="form-control editor-textarea" rows="10">{
  "username": "testuser",
  "password": "{{ encrypted_password }}"
}</textarea>
                        </div>
                        <div class="tab-pane" id="extract">
                            <textarea id="extract" class="form-control editor-textarea" rows="10">{}</textarea>
                        </div>
                        <div class="tab-pane" id="export">
                            <textarea id="export" class="form-control editor-textarea" rows="10">{}</textarea>
                        </div>
                        <div class="tab-pane" id="validators">
                            <textarea id="validators" class="form-control editor-textarea" rows="10">[]</textarea>
                        </div>
                        <div class="tab-pane" id="script">
                            <textarea id="script" class="form-control editor-textarea"
                                      rows="10">// 预请求脚本</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_scripts %}
    <script src="{% static 'cases/js/case_create.js' %}"></script>

{% endblock %}





